<script setup lang="ts">
import {computed, ref, toRefs} from "vue";
import ImageSelector from "@/components/ImageSelector";
import {imagePreview} from "@/util";
import {isString} from "@/util/is.ts";
import {Close} from '@vicons/carbon'
import {FileImageTwotone} from '@vicons/antd'

const emits = defineEmits(['update:value'])
const props = defineProps({
  value: {
    type: [Array, String, null],
    default: () => null,
  },
  width: {
    type: Number,
    default: 70
  },
  height: {
    type: Number,
    default: 70
  },
  count: {
    type: Number,
    default: 1
  },
  gap: {
    type: Number,
    default: 8
  },
  cols: {
    type: Number,
    default: 2
  },
  borderStyle: {
    type: String,
    default: "dashed"
  },
  iconSize: {
    type: Number,
    default: 48
  }
});
const {count, value} = toRefs(props);
//图片选择器
const img_sel = ref<boolean>(false)
//计算出剩余数量
const change_img_index = ref<number>(-1);//要更换的图片的index

const residue_img = computed(() => {
  if (change_img_index.value >= 0 || isString(value.value)) {
    return 1;
  } else if (Array.isArray(value.value)) {
    return count.value - value.value.length;
  } else {
    return count.value;
  }
});
//从图片选择器选择的图片
const selected_imgs = (img_s: string[]) => {
  setTimeout(() => {
    if (isString(value.value)) {
      emits('update:value', img_s[0]);
    } else if (Array.isArray(value.value)) {
      if (change_img_index.value >= 0) {
        value.value[change_img_index.value] = img_s[0];
        change_img_index.value = -1;
      } else {
        emits('update:value', [...value.value, ...img_s]);
      }
    } else if (count.value === 1) {
      emits('update:value', img_s[0]);
    } else {
      emits('update:value', img_s);
    }
  }, 300);
};
//更换已选中的图片
const changeImg = (index: number) => {
  change_img_index.value = index;
  img_sel.value = true;
}
//去除已选中指定图片
const removeSelectedImg = (index?: number) => {
  if (isString(value.value)) {
    emits('update:value', '');
  } else if (Array.isArray(value.value) && index !== undefined) {
    value.value.splice(index, 1);
    emits('update:value', [...value.value]);
  }
};
</script>

<template>
  <div class="image-selection"
       :style="{'--img-selection-width':width + 'px','--img-selection-height':height + 'px','--img-border-style':borderStyle,'--img-x-gap':gap+'px','--img-col':cols}">
    <div class="image-selection-list">
      <template v-if="isString(value) && value">
        <div class="image-selection-select-box">
          <div class="image-selection-select-box-remove" @click.stop="removeSelectedImg()">
            <n-icon color="#fff" :size="16">
              <Close/>
            </n-icon>
          </div>
          <img style="width: 100%;height: 100%" :src="imagePreview(value)" alt="" @click.stop="changeImg(0)">
        </div>
      </template>
      <template v-else>
        <template v-if="Array.isArray(value) && value.length">
          <div v-for="(item,index) in value" :key="index">
            <div class="image-selection-select-box">
              <div class="image-selection-select-box-remove" @click.stop="removeSelectedImg(index)">
                <n-icon color="#fff" :size="16">
                  <Close/>
                </n-icon>
              </div>
              <img style="width: 100%;height: 100%" :src="imagePreview(item)" alt="" @click.stop="changeImg(index)">
            </div>
          </div>
        </template>
        <template v-if="count != (Array.isArray(value) ? value.length : 0)">
          <div class="image-selection-select-box">
            <n-icon :size="props.iconSize" color="#dde5f2" @click.stop="()=>{img_sel=true}">
              <FileImageTwotone/>
            </n-icon>
          </div>
        </template>
      </template>
    </div>
  </div>
  <image-selector v-model:show="img_sel" :select-number="residue_img" @selected="selected_imgs"/>
</template>

<style lang="scss">
.image-selection {
  &-list {
    display: grid;
    grid-template-columns: repeat(var(--img-col), 1fr);
    gap: var(--img-x-gap);
  }

  &-select-box {
    width: var(--img-selection-width);
    height: var(--img-selection-height);
    background-color: #FFFFFF;
    border-radius: var(--n-border-radius);
    border: 1px var(--img-border-style) #dde5f2;
    display: flex;
    justify-content: center;
    align-items: center; /* 垂直居中 */
    cursor: pointer;
    padding: 2px;
    position: relative;

    img {
      border-radius: var(--n-border-radius);
    }

    &-remove {
      cursor: pointer;
      width: 16px;
      height: 16px;
      background-color: rgba(0, 0, 0, .3);
      position: absolute;
      top: -6px;
      right: -6px;
      border-radius: 50%;
      text-align: center;
    }
  }
}
</style>